<template>
	<view>
		<view class="box-slideLeft" v-for="(i, index) in 3" :key="index">
			<view class="touch-item touch-slideLeft " @touchstart="touchS" @touchmove="touchM" @touchend="touchE"  :data-index="index" :style="item_show[index] ? item_show[index].txtStyle : ''">
				<view class="flex-ja-bc">
					<view class="video">
						<video src="/static/video1.mp4" controls></video>
					</view>
					<view class="content">
						<view class="title ellipsis f16">
							wowowowowwwo啊飒飒的q44556阿斯顿发送到
						</view>
						<view class="flex-ja-bc info">
							<view class="">
								2021-06-24
							</view>
							<view class="score">
								98分
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="touch-item del-box-touch-slideLeft cf-shuCenter edit"  @click="editItem(item_show)">
				编辑
			</view>
			<view class="touch-item del-box-touch-slideLeft cf-shuCenter"  @click="delItem(item_show)">
				删除
			</view>

		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				
				item_show : {
					// txtStyle: ''
				},
				delBtnWidth: 180, //删除按钮宽度单位（rpx）
				startX: '',
				currentindex: '',
			};
		},
		created:function(){
		},
		watch: {

		},
		methods: {
			//点击删除按钮事件
			delItem: function(e) {
				let that = this;
				let data ={
					item : e ,
					data : that.data_transit ,
				};
				this.$emit('delItem', data);
			},
			touchS: function(e) {
				console.log(e);
				let index = e.currentTarget.dataset.index
				this.currentindex = index
				if(!this.item_show[index]) {
					this.$set(this.item_show, index, {txtStyle: ''});
				}
				console.log(this.item_show)
				
				let that = this;
				if (e.touches.length == 1) {
					//设置触摸起始点水平方向位置
					this.startX = e.touches[0].clientX
					
				}
			},
			touchM: function(e) {
				let that = this;
				
				if (e.touches.length == 1) {
					//手指移动时水平方向位置
					var moveX = e.touches[0].clientX;
					//手指起始点位置与移动期间的差值
					var disX = this.startX - moveX;
					var delBtnWidth = this.delBtnWidth;
					var txtStyle = "";
					if (disX == 0 || disX < 0) { //如果移动距离小于等于0，说明向右滑动，文本层位置不变
						txtStyle = "left:0px";
					} else if (disX > 0) { //移动距离大于0，文本层left值等于手指移动距离
						txtStyle = "left:-" + disX + "px";
						if (disX >= delBtnWidth) {
							//控制手指移动距离最大值为删除按钮的宽度
							txtStyle = "left:-" + delBtnWidth + "px";
						}
					}
					//获取手指触摸的是哪一项
					that.item_show[that.currentindex].txtStyle = txtStyle;
					//that.item_show[that.currentindex] = Object.assign(that.item_show[that.currentindex], {txtStyle: txtStyle})
					
				}
			},
			touchE: function(e) {
				let that = this;
				if (e.changedTouches.length == 1) {
					//手指移动结束后水平位置
					var endX = e.changedTouches[0].clientX;
					//触摸开始与结束，手指移动的距离
					var disX = this.startX - endX;
					var delBtnWidth = this.delBtnWidth;
					//如果距离小于删除按钮的1/2，不显示删除按钮
					var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
					//获取手指触摸的是哪一项
					that.item_show[that.currentindex].txtStyle = txtStyle;
					//that.item_show.txtStyle = txtStyle;
					
				}
			},
			
		}

	}
</script>

<style lang="scss">
	.flex-ja-bc{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.p10{
		padding: 10px;
	}
	.ellipsis{
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.f16{
		font-size: 16px;
	}
	uni-video{
		width: 100%;
		height: 100%;
	}
	.box-slideLeft {
		view {
			box-sizing: border-box;
		}
		position: relative;
		// overflow: hidden;
		
		.touch-item {
			position: absolute;
			top: 0;
			padding: 10px 10px 10px;
			background-color: #FFFFFF;
			// border-radius: 10px;
			overflow: hidden;
			.content{
				padding-left: 10px;
				overflow: hidden;
				.info{
					color: #808080;
					margin-top: 30px;
				}
			}
			.video{
				min-width: 150px;
				height: 100px;
				border-radius: 10px;
				overflow: hidden;
			}
		}
		
		.touch-slideLeft {
			position: relative;
			width: 100%;
			z-index: 5;
			transition: left 0.2s ease-in-out;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.del-box-touch-slideLeft {
			right: 0;
			float: left;
			width: 90px;
			height: 100%;
			// line-height: 101px;
			background-color: #F66145;
			// border-radius: 0 10px 10px 0;
			color: #fff;
			font-size: 18px;
			font-weight: lighter;
			text-align: center;
		}
		.edit{
			right: 90px;
			background: #4A8BFE;
		}
		.icon-shanchu{
			font-size: 44upx;
		}
		
		.cf-shuCenter{
			display: flex;
			//flex-direction: column;
			justify-content: center;
			align-items: center;
			
		}
	}

	
</style>

